<template>
  <a-form class="from" :form="form">
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="用户名"
    >
      <a-input
        v-decorator="[
          'username',
          { rules: [{ required: true, message: 'Please input your name' }] },
        ]"
        placeholder="请输入用户名"
      />
    </a-form-item>
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="密码"
    >
      <a-input
        v-decorator="[
          'nickname',
          {
            rules: [
              { required: checkNick, message: 'Please input your nickname' },
            ],
          },
        ]"
        placeholder="请输入密码"
      />
    </a-form-item>

    <a-form-item
      :label-col="formTailLayout.labelCol"
      :wrapper-col="formTailLayout.wrapperCol"
    >
      <a-button type="primary" @click="check"> 登录 </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { login } from 'api'
import { setCookie } from 'utils/cookie'
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 }
}
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 }
}

export default {
  data () {
    return {
      checkNick: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'dynamic_rule' })
    }
  },
  methods: {
    check () {
      // 发送 登录请求
      // 一般来说的话， 判断 用户名 是不是存在的，==> 密码 是不是正确的 ==> 发送请求
      // 让你去 注册页
      // 对于页面来说： 必须填写，正则判断
      login().then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          // 简单的利用设置 cookie 来做登录鉴权
          const { token, userInfo, role } = res.data.data
          setCookie('access_token', token, {
            expires: 7 // 失效时长
          })
          setCookie('userInfo', JSON.stringify(userInfo), {
            // JSON.stringify(userInfo) 对象不能直接存储
            expires: 7 // 失效时长
          })
          setCookie('role', role, {
            expires: 7 // 失效时长
          })

          this.$message.success('登录成功！', 3, () => {
            this.$router.replace('/admin')
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.from{
  width: 800px;
  height: 300px;
  margin: auto;
}
</style>
